<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>合规检查</title>
		<link href="css/common.css" rel="stylesheet" type="text/css" />
		<link href="css/style.css" rel="stylesheet" type="text/css">
		<link rel="stylesheet" type="text/css" href="css/layui.css" />
		<script type="text/javascript" src="js/rem.js"></script>
		<style type="text/css">
			.nav-search {
				width: 100%;
				height: 0.88rem;
				position: absolute;
				top: 1.28rem;
				left: 0;
				background: #FFFFFF;
				padding: 0.14rem 0.3rem;
			}

			.search-input {
				width: 100%;
				height: 0.6rem;
				background-color: #F2F2F2;
				border-radius: 0.32rem;
				border: 0;
				padding: 0;
				margin: auto 0;
				outline: none;
				font-size: 0.28rem;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				text-align: center;
				line-height: 0.6rem;
			}

			.tab-wrapper {
				width: 100%;
				position: absolute;
				top: 2.16rem;
				left: 0;
				background: #FFFFFF;
				border-top: 1px solid #e6e6e6;
			}

			.tab-content {
				width: 100%;
				min-height: 100vh;
				background-color: #F4F4F4;
				position: relative;
				padding: 3.10rem 0.3rem 2.06rem 0.3rem;
			}

			.no-result {
				position: absolute;;
				top: 50%;
				left: 50%;
				margin-left: -1.4rem;
				margin-top: -1.9rem;
				text-align: center;
				display: none;
			}

			.no-result.show {
				display: block;
			}

			.no-result img {
				width: 2.8rem;
				height: 2.8rem;
			}

			.no-result .text {
				margin-top: 0.3rem;
				font-size:0.28rem;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color: #999999;
			}

			.card {
				width: 100%;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.04);
				border-radius: 16px;
				margin-top: 0.24rem;
				position: relative;
				display: block;
			}

			.hidden {
				display: none;
			}
			.card-content {
				width: 100%;
				padding-right: 1.26rem;
				padding: 0.36rem 0.3rem 0.3rem 0.3rem;
			}

			.cc-item {
				font-size: 0.28rem;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 0.56rem;
				display: flex;
			}

			.cci-title {
				color: #888888;
				text-align: center;
			}

			.cci-content {
				flex: 1;
				color: #222222;
			}

			.card-label {
				height: 0.4rem;
				font-size: 0.28rem;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF6A13;
				line-height: 0.4rem;
				text-align: center;
				position: absolute;
				top: 0.3rem;
				right: 0.3rem;
				z-index: 2;
			}

			.text-gray {
				color: #999999;
			}

			.text-blue {
				color: #1583FF;
			}

			.card-bottom {
				width: 100%;
				height: 1rem;
				border-top: 1px solid #D8D8D8;

				display: flex;
				color: #222222;
				font-size: 0.32rem;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
			}

			.card-bottom-btn {
				flex: 1;
				height: 1rem;
				text-align: center;
				line-height: 1rem;
			}

			.card-bottom-btn+.card-bottom-btn {
				border-left: 1px solid #D8D8D8;
			}

			/* tab样式基于layui修改 */
			#container.layui-tab {
				margin: 0 0.08rem;
				margin: 0;
				padding: 0 0.08rem;
				background-color: #FFFFFF;
				box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
				height: 0.88rem;
			}

			#container .layui-tab-title {
				overflow: auto;
				border-bottom-width: 0px;
				height: 0.88rem;
			}

			#container .layui-tab-bar {
				display: none;
			}

			#container .layui-tab-title li {
				font-size: 0.28rem;
				line-height: 0.88rem;
				min-width: 0;
				margin: 0 0.4rem;
				padding: 0;
				color: #666666;
			}

			#container .layui-tab-title .layui-this {
				color: #1583FF;
			}
			#container .layui-tab-title .layui-this:after {
				height: 0.88rem;
			}

			#container .layui-tab-brief>.layui-tab-more li.layui-this:after,
			.layui-tab-brief>.layui-tab-title .layui-this:after {
				border: none;
				border-radius: 0.02rem;
				border-bottom: 0.04rem solid #1583FF;
			}

			::-webkit-scrollbar {
				width: 0;
				height: 0
			}
		</style>
	</head>
	<body>
		<div class="app-nav flex-direction">
			<text class="app-nav-title">标题</text>
			<div class="nav-search">
				<input class="search-input" type="text" placeholder="搜索单位、小区或联系人" />
			</div>

			<div class="tab-wrapper">
				<div id="container" class="layui-tab layui-tab-brief" lay-filter="tabs">
					<ul class="layui-tab-title">
						<li lay-id="1" class="layui-this">全部</li>
						<li lay-id="2">合格</li>
						<li lay-id="3">现场整改</li>
						<li lay-id="4">整改中</li>
						<li lay-id="5">待验收</li>
						<li lay-id="6">验收完成</li>
					</ul>
					<!-- <div class="layui-tab-content"></div> -->
				</div>
			</div>
		</div>

		<div class="tab-content" id="tab-content">
			<div class="no-result" id="no-result">
				<img src="img/no_content.png" alt="暂无内容" />
				<div class="text">暂无内容</div>
			</div>

		 	<div class="card" id="card">
				<div class="card-label">待验收</div>
				<div class="card-content">
					<div class="cc-item">
						<div class="cci-title">被查类型：</div>
						<div class="cci-content">小区</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">小区名称：</div>
						<div class="cci-content">XXX悦玺花苑</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">&emsp;联系人：</div>
						<div class="cci-content">赵经纬</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">整改时间：</div>
						<div class="cci-content">2020年4月23日</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">处理意见：</div>
						<div class="cci-content">请务必尽快清理安全通道杂物</div>
					</div>
				</div>
				<div class="card-bottom">
					<div class="card-bottom-btn">查看详情</div>
					<div class="card-bottom-btn text-blue">验收</div>
				</div>

			</div>
			<div class="card">
				<div class="card-label">整改中</div>
				<div class="card-content">
					<div class="cc-item">
						<div class="cci-title">被查类型：</div>
						<div class="cci-content">小区</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">小区名称：</div>
						<div class="cci-content">XXX悦玺花苑</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">&emsp;联系人：</div>
						<div class="cci-content">赵经纬</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">整改时间：</div>
						<div class="cci-content">2020年4月23日</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">处理意见：</div>
						<div class="cci-content">请务必尽快清理安全通道杂物</div>
					</div>
				</div>
				<div class="card-bottom">
					<div class="card-bottom-btn">查看详情</div>
				</div>
			</div>
			<div class="card">
				<div class="card-label text-gray">合格</div>
				<div class="card-content">
					<div class="cc-item">
						<div class="cci-title">被查类型：</div>
						<div class="cci-content">小区</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">小区名称：</div>
						<div class="cci-content">XXX悦玺花苑</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">&emsp;联系人：</div>
						<div class="cci-content">赵经纬</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">整改时间：</div>
						<div class="cci-content">2020年4月23日</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">处理意见：</div>
						<div class="cci-content">请务必尽快清理安全通道杂物</div>
					</div>
				</div>
				<div class="card-bottom">
					<div class="card-bottom-btn">查看详情</div>
				</div>
			</div>
			<div class="card">
				<div class="card-label">现场整改</div>
				<div class="card-content">
					<div class="cc-item">
						<div class="cci-title">被查类型：</div>
						<div class="cci-content">小区</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">小区名称：</div>
						<div class="cci-content">XXX悦玺花苑</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">&emsp;联系人：</div>
						<div class="cci-content">赵经纬</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">整改时间：</div>
						<div class="cci-content">2020年4月23日</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">处理意见：</div>
						<div class="cci-content">请务必尽快清理安全通道杂物</div>
					</div>
				</div>
				<div class="card-bottom">
					<div class="card-bottom-btn">查看详情</div>
				</div>
			</div>
			<div class="card">
				<div class="card-label text-gray">验收完成</div>
				<div class="card-content">
					<div class="cc-item">
						<div class="cci-title">被查类型：</div>
						<div class="cci-content">小区</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">小区名称：</div>
						<div class="cci-content">XXX悦玺花苑</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">&emsp;联系人：</div>
						<div class="cci-content">赵经纬</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">整改时间：</div>
						<div class="cci-content">2020年4月23日</div>
					</div>
					<div class="cc-item">
						<div class="cci-title">处理意见：</div>
						<div class="cci-content">请务必尽快清理安全通道杂物</div>
					</div>
				</div>
				<div class="card-bottom">
					<div class="card-bottom-btn">查看详情</div>
				</div>
			</div>
		</div>

		<div class="compliance-bottom-wrapper">
			<div class="compliance-bottom-btn bg-blue">新建检查</div>
		</div>

		<script src="layui.js"></script>
		<script>
			layui.use('element', function() {
				var element = layui.element;
				//Tab切换事件监听值(tabs对应lay-filter的值),以改变地址hash
				element.on('tab(tabs)', function(){
					//对应lay-id
					var index = this.getAttribute('lay-id')
					console.log(index);
					// 模拟 没有数据
					if (index === '2'){
						console.log('执行了吗');
						
						var pNode = document.getElementById("tab-content");
						var cNode = document.getElementById("card");
						var htmlString = '<div class="card">'+
											'<div class="card-label text-gray">验收完成</div>'+
											'<div class="card-content">'+
												'<div class="cc-item">'+
													'<div class="cci-title">被查类型：</div>'+
													'<div class="cci-content">小区</div>'+
												'</div>'+
												'<div class="cc-item">'+
													'<div class="cci-title">小区名称：</div>'+
													'<div class="cci-content">XXX悦玺花苑</div>'+
												'</div>'+
												'<div class="cc-item">'+
													'<div class="cci-title">&emsp;联系人：</div>'+
													'<div class="cci-content">赵经纬</div>'+
												'</div>'+
												'<div class="cc-item">'+
													'<div class="cci-title">整改时间：</div>'+
													'<div class="cci-content">2020年4月23日</div>'+
												'</div>'+
												'<div class="cc-item">'+
													'<div class="cci-title">处理意见：</div>'+
													'<div class="cci-content">请务必尽快清理安全通道杂物</div>'+
												'</div>'+
											'</div>'+
											'<div class="card-bottom">'+
												'<div class="card-bottom-btn">查看详情</div>'+
											'</div>'+
										'</div>';
						var addNode = new DOMParser().parseFromString(htmlString,'text/html').body.childNodes[0]
						pNode.insertBefore(addNode,cNode);
						console.log('执行了吗2');
					} else {
					
					}
				});
				//手动控制切换tab-> lay-id=2
				element.tabChange('tabs', '2');
			});
		</script>
	</body>
</html>
